<template>
  <div>
    <search-list
      ref="skillList"
      :api-url="$url.SkillList"
      :option="searchOpt"
      @selection-change="selectionChange"
      :itemPerRow="5"
      :beforeQuery="beforeQuery"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="uid" label="发布用户ID"></el-table-column>
      <el-table-column prop="nickname" label="发布用户"></el-table-column>
      <el-table-column prop="title" label="技能标题"></el-table-column>
      <el-table-column prop="categoryName" label="技能类型"></el-table-column>
      <el-table-column label="报价">
        <template slot-scope="scope">
          <span v-if="scope.row.minPrice == 0 && scope.row.maxPrice == 0">面议</span>
          <span v-if="scope.row.minPrice != 0 && scope.row.maxPrice == 0">
            ￥{{ scope.row.minPrice }}
          </span>
          <span
            v-if="
              scope.row.minPrice != scope.row.maxPrice &&
                scope.row.minPrice != 0 &&
                scope.row.maxPrice != 0
            "
          >
            ￥{{ scope.row.minPrice }}~￥{{ scope.row.maxPrice }}
          </span>
          <span
            v-if="
              scope.row.minPrice == scope.row.maxPrice &&
                scope.row.minPrice != 0 &&
                scope.row.maxPrice != 0
            "
          >
            ￥{{ scope.row.minPrice }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="checked" label="审核状态">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['checkedSl'](scope.row.checked).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="publishAt" label="发布时间"></el-table-column>
      <el-table-column label="操作" width="280px">
        <template slot-scope="scope">
          <el-button type="text" @click="detail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
      <div slot="btn-before" class="btn-before">
        <el-select v-model="categoryId" placeholder="技能类型" clearable>
          <el-option
            v-for="item in skillCateData"
            :key="item.id"
            :value="item.id"
            :label="item.dictValue"
          ></el-option>
        </el-select>
      </div>
      <div slot="btn-after" class="btn-after" slot-scope="scope">
        <el-button type="success" :disabled="scope.selectedData.length == 0" @click="pass">
          审核通过
        </el-button>
        <el-button
          type="danger"
          icon="el-icon-close"
          @click="noPass"
          :disabled="scope.selectedData.length == 0"
        >
          审核不通过
        </el-button>
      </div>
    </search-list>
    <el-dialog width="500px" title="填写审核不通过原因" :visible.sync="dialogShow">
      <el-form>
        <el-form-item label="原因">
          <el-input v-model.trim="reason"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button icon="el-icon-close" @click="dialogClose">关 闭</el-button>
        <el-button type="success" @click="saveReason" icon="el-icon-check">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dialogShow: false,
        reason: '',
        selectedData: [],
        skillCateData: [],
        categoryId: '',
        searchOpt: [
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'uuid',
            label: '用户ID',
          },
          {
            type: 'checkedSl',
            name: 'checked',
            label: '审核状态',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_DATEPICKER,
            name: 'publishAt',
            label: '发布时间',
            conf: {
              type: 'datetimerange',
              format: 'yyyy-MM-dd HH:mm:ss',
              'value-format': 'yyyy-MM-dd HH:mm:ss',
              'start-placeholder': '发布开始时间',
              'end-placeholder': '发布结束时间',
            },
          },
        ],
      };
    },
    mounted() {
      this.getSkillDict();
    },
    methods: {
      beforeQuery({ searchInfo }) {
        searchInfo.categoryId = this.categoryId;
        if (searchInfo.publishAt === null) {
          searchInfo.startTime = '';
          searchInfo.endTime = '';
        } else {
          searchInfo.startTime = searchInfo.publishAt[0];
          searchInfo.endTime = searchInfo.publishAt[1];
        }
      },
      getSkillDict() {
        this.$service.JmDictList({ type: 3 }).then((res) => {
          this.skillCateData = res;
        });
      },
      selectionChange(val) {
        this.selectedData = [...val];
      },
      detail(row) {
        const { id } = row;
        this.$tabs.open({ name: 'ServiceSkillDetail', params: { id } });
      },
      pass() {
        this.$service
          .SkillPass({ ids: this.selectedData.map((data) => data.id).join(',') })
          .then((res) => {
            this.$message.success('审核通过');
            this.$refs['skillList'].getList();
          })
          .catch((res) => {
            this.$message.error(res.message);
          });
      },
      noPass() {
        this.dialogShow = true;
      },
      dialogClose() {
        this.dialogShow = false;
      },
      saveReason() {
        if (this.reason == '') {
          this.$message.warning('请输入不通过原因');
          return;
        } else {
          this.$service
            .SkillRefuse({
              ids: this.selectedData.map((data) => data.id).join(','),
              reason: this.reason,
            })
            .then((res) => {
              this.dialogShow = false;
              this.$message.success('操作成功');
              this.$refs['skillList'].getList();
              this.selectedData = [];
            });
        }
      },
    },
  };
</script>
<style lang="less" scoped></style>
